<template>
	<view class="wrap" style="padding-top: 30px;">
		<uni-nav-bar leftText="保存" title="收货地址" fixed="true" shadow="true" backgroundColor= "" @clickLeft="savaDizhi()"></uni-nav-bar>
		<view class="top">
			<view class="item">
				<view class="left">收货人</view>
				<input type="text" placeholder-class="line" v-model="adName" placeholder="请填写收货人姓名" />
			</view>
			<view class="item">
				<view class="left">手机号码</view>
				<input type="number" placeholder-class="line" v-model="adTel" placeholder="请填写收货人手机号" />
			</view>
			<view class="item" @tap="showRegionPicker">
				<view class="left">所在地区</view>
				<input disabled type="text" :value="fullDizhi" placeholder-class="line" placeholder="省市区县、乡镇等" />
			</view>
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" placeholder-class="line" v-model="adDetail" placeholder="街道、楼牌等" />
			</view>
		</view>
		<view class="bottom">
			<view class="default">
				<view class="left">
					<view class="set">设置默认地址</view>
					<view class="tips">提醒：每次下单会默认推荐该地址</view>
				</view>
				<view class="right"><switch color="blue" :checked="defaultDizhi" @change="setDefault" /></view>
			</view>
		</view>
		
		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			adName:""			,// 收货人姓名
			adTel:""			,// 收货人电话
			adDetail:""		,// 详细地址
			sheng:""			,// 省
			shi:""				,// 市
			xian:""				 ,// 区县
			list: []			,// 全国所有区县
			defaultDizhi:false		,// 是否设置为默认地址 
			adarea:''					,// 区县id
			adid:''				,// 之前的默认收货地址id
			type:""				// 新增或编辑
		};
	},
	methods: {
		setDefault(e) {
			this.defaultDizhi = e.detail.value;
		},
		showRegionPicker() {
			this.show = true;
		},
		confirm(res){
			this.sheng = res[0].label;
			this.shi = res[1].label;
			this.xian = res[2].label;
			this.adarea = res[2].value;
		},
		savaDizhi(){
			let uid = uni.getStorageSync("usersId");
			let adname = this.adName;
			let adphone = this.adTel;
			let addetail = this.adDetail;
			let adarea = this.adarea;
			let adstatus = this.defaultDizhi?1:0 ;
			let adid = this.adid;
			let id = this.id;
			if(adname.length<1){
				this.$u.toast("请填写收货人姓名")	;
				return;
			}
			if(this.$u.test.mobile(adphone)==false){
				this.$u.toast("请填写正确的手机号码")	;
				return;
			}
			if(this.isNull(adarea)){
				this.$u.toast("请选择省市县")	;
				return;
			}
			if(addetail.length<1){
				this.$u.toast("请填写详细地址")	;
				return;
			}
			// appaddress.do?p=addAddress  保存新增地址
			if(this.type=='add'){
				this.$http.post('/appaddress.do?p=addAddress', {
					adId:adid,
					uid:uid,
					adname:adname,
					adphone:adphone,
					adarea:adarea,
					addetail:addetail,
					adstatus:adstatus
				}).then(res => {
					if(res.data=='成功'){
						this.$u.toast("新增成功");
						setTimeout(function(){
							uni.navigateBack({
								
							});
							uni.$emit('getDizhi');
						},500)
					}
				})
			}else if(this.type=='update'){		// 编辑地址
				// appaddress.do?p=editAddress
				this.$http.post('/appaddress.do?p=editAddress', {
					id:this.id,
					adId:this.adid,
					adname:adname,
					adphone:adphone,
					adarea:adarea,
					addetail:addetail,
					adstatus:adstatus
				}).then(res => {
					if(res.data=='成功'){
						this.$u.toast("编辑成功");
						setTimeout(function(){
							uni.navigateBack({
								
							});
							uni.$emit('getDizhi');
						},500)
					}
				})
			}
		},
		//判空
		isNull(str){
			return str==null || str=="" || str==undefined
		}
	},
	computed:{
		fullDizhi(){
			if(this.sheng==''){
				return '';
			}else{
				return this.sheng+'-'+this.shi+'-'+this.xian;
			}
		}
	},
	onLoad(opt) {
		this.$http.get('/appaddress.do?p=getAllProvice', {	// 查询省份
		
		}).then(res => {
			for(let i=0,len=res.data.length;i<len;i++){
				let obj = {};
				obj.label = res.data[i].prName;
				obj.value= res.data[i].prId;
				let shi =[	];
				this.$http.get('/appaddress.do?p=getAllCity', {id:obj.value}).then(res1=>{	// 查询地市
					for(let j=0,lenth=res1.data.length;j<lenth;j++){
						let obj = { };
						obj.label = res1.data[j].ctName;
						obj.value= res1.data[j].ctId;
						let quxian = [];
						this.$http.get('/appaddress.do?p=getAllArea', {id:obj.value}).then(res2=>{	// 查询区县
							for(let k=0,lenth2=res2.data.length;k<lenth2;k++){
								let obj = { };
								obj.label = res2.data[k].arName;
								obj.value= res2.data[k].arId;
								quxian.push(obj);
							}
						})
						obj.children=quxian;		// 把区县绑定到城市
						shi.push(obj);
					}
				})
				obj.children =  shi;			// 把市绑定到省
				this.list.push(obj);				// 把省份添加到list数组
			}
		});
		if(opt.type=='add'){
			this.type='add';
			this.adid = opt.adid;
		}else if(opt.type=='update'){
			this.xian= opt.aname;
			this.shi = opt.cname;
			this.sheng = opt.pname;
			this.type='update';
			this.adid = opt.adid;		// 之前的默认地址id
			this.id = opt.adId;			// 点击编辑的地址id
			this.adName = opt.adname;
			this.adTel = opt.adtel;
			this.adDetail  = opt.addetail;
			this.adarea = opt.arId;
			if(this.adid==this.id)
			{
				this.defaultDizhi = true;
			}	 
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .line {
	color: $u-light-color;
	font-size: 20rpx;
}
.wrap {
	background-color: #f2f2f2;
	.top {
		background-color: #ffffff;
		border-top: solid 2rpx $u-border-color;
		padding: 22rpx;
		.item {
			display: flex;
			font-size: 32rpx;
			line-height: 100rpx;
			align-items: center;
			border-bottom: solid 2rpx $u-border-color;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
			}
		}
		
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.bottom {
		margin-top: 20rpx;
		padding: 40rpx;
		padding-right: 0;
		background-color: #ffffff;
		font-size: 28rpx;
		.tag {
			display: flex;
			.left {
				width: 160rpx;
			}
			.right {
				display: flex;
				flex-wrap: wrap;
				.tags {
					width: 140rpx;
					padding: 16rpx 8rpx;
					border: solid 2rpx $u-border-color;
					text-align: center;
					border-radius: 50rpx;
					margin: 0 10rpx 20rpx;
					display: flex;
					font-size: 28rpx;
					align-items: center;
					justify-content: center;
					color: $u-content-color;
					line-height: 1;
				}
				.plus {
					//padding: 10rpx 0;
				}
			}
		}
		.default {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 2rpx $u-border-color;
			line-height: 64rpx;
			.tips {
				font-size: 24rpx;
			}
			.right {
			}
		}
	}
}
</style>
